<template>
	<view class="crowdfunding">
			<uni-nav-bar fixed="false" statusBar="true" right-icon="search" class="navtop" left-icon="left" @clickLeft="gotoBack" title="众筹"></uni-nav-bar>
			<view class="contenet">
				<ul class="contenet_ul">
					<li class="contenet_li" @click="gotoinfo">
						<image src="../../static/10070z000000o7evs33EF.jpg" class="img" mode=""></image>
						<h3 class="h3">{{item.name}}</h3>
						<van-progress :percentage="jindu" class="progress" />
						<ul class="contenet_ul_2">
							<li class="contenet_li_2">
								<span class="reds">￥{{item.innum.toFixed(2)}}</span>
								<span>已筹款</span>
							</li>
							<li class="contenet_li_2">
								<span>{{item.num}}</span>
								<span>支持数</span>
							</li>
							<li class="contenet_li_2">
								<span>{{jindu+"%"}}</span>
								<span>筹款进度</span>
							</li>
						</ul>

			

						<van-button class="butten" size="mini" :color="item.state?'#e51c23':'#b3b3b3'" >{{item.state?"众筹中":"已结束"}}</van-button>
					</li>
					
					
				</ul>
			</view>
	</view>
</template>
<script >
	export default{
		data(){
			return {
				jindu:57,
				item:{
					state:false,
					name:"特制的神秘麝香，芦荟漂，漂盒，等小众产品",
					num:655,
					innum:16236,
					oneprice:1
				}
			}
		},
		methods:{
			gotoBack(){
				uni.switchTab({
					url:'/pages/tabbar/tabbar-1/tabbar-1'
				})
			},
			gotoinfo(){
				uni.navigateTo({
					url:`/pages/crowdfundinginfo/Index?name=${this.item.name}&oneprice=${this.item.oneprice}`
				})
			}
		}
	}
</script>
<style scoped>
	.crowdfunding{
		width: 100%;
		height: 100vh;
		margin: 0;
		padding: 0;
	}
	.navtop{
		margin-top: 30rpx;
	}
	.contenet{
		width: 100%;
	}
	.contenet_ul{
		margin: 0;
		padding: 0 10rpx 0 10rpx;
		
	}
	.butten{
		position: absolute;
		left: 20rpx;
		top: 10rpx;
		z-index: 1;
	}
	.contenet_li{
		position: relative;
		display: flex;
		justify-content: space-between;
		height: 450rpx;
		/* background-color: red; */
		flex-direction: column;
		
	}
	.img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.contenet_li .h3{
		font-size: 35rpx;
	}
	.progress{
		margin-top: 30rpx;
	}
	.contenet_ul_2{
		width: 100%;
		margin: 0;
		padding: 0;
		display: flex;
		height: 100rpx;
		margin-top: 20rpx;
		align-items: center;
		    justify-content: space-between;

	}
	.contenet_li_2{
		width: 200rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		    align-items: center;
		    justify-content: flex-end;
	}
	.reds{
		color: red;
		font-weight: bolder;
		font-size: 40rpx;
	}
	
</style>